<template>
	<div class="overflow-hidden">
		<n-card :bordered="false" class="h-full rounded-8px shadow-sm">
			<div class="flex-col h-full">
				<n-space class="pb-12px" justify="space-between">
					<n-space>
						<n-button type="primary" @click="dsOpenSupportDs">
							<icon-ic-round-plus class="mr-4px text-10px"/>
							新增
						</n-button>
					</n-space>
					<n-space align="center" :size="18">
						<n-button size="small" type="primary" @click="initTableData">
							<icon-mdi-refresh class="mr-4px text-16px"/>
							刷新表格
						</n-button>
					</n-space>
				</n-space>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="dsName" label="连接名称"/>
					<el-table-column prop="dsType" label="连接类型"/>
					<el-table-column prop="host" label="连接主机"/>
					<el-table-column prop="port" label="端口号"/>
					<el-table-column prop="dsDataBase" label="数据库"/>
					<el-table-column prop="dsSchema" label="所属schema"/>
					<el-table-column prop="driverClassName" label="驱动类名称"/>
					<el-table-column prop="dsDescribe" label="连接描述"/>
					<el-table-column prop="createBy" label="操作人"/>
					<el-table-column label="操作" align="center">
						<template #default="{row}">
							<n-space justify="center">
								<n-button type="primary" text class="text-15px" @click="testConnection(row)">
									<icon-ep-connection/>
									测试连接
								</n-button>
								<n-button type="primary" text class="text-15px" @click="handlerEdit(row)">
									<icon-ep-edit-pen/>
									编辑
								</n-button>
								<n-popconfirm
									@positive-click="handlerDelete(row.dsId)"
								>
									<template #trigger>

										<n-button type="error" text class="text-15px">
											<icon-ic-round-delete/>
											删除
										</n-button>
									</template>
									你确定要删除吗?
								</n-popconfirm>
							</n-space>
						</template>
					</el-table-column>
				</el-table>
				<n-space justify="end" class="mt-5px">
					<n-pagination
						v-model:page="dsSearchParams.page"
						v-model:page-size="dsSearchParams.size"
						:item-count="itemCount"
						show-size-picker
						:page-sizes="[10, 20, 30, 40]"
						:on-update:page="onChange"
						:on-update:page-size="onUpdatePageSize"
					/>
				</n-space>
				<el-dialog v-model="supportDsDialog"
									 width="700px"
									 title="支持类型">
					<div class="dbMain">
						<div v-for="item in dbTypes" class="dbMainItem" @click="openSupportDsType(item)">
							<img :src="resolveImg(item)" class="image"/>
							<div>{{ item }}</div>
						</div>
					</div>
					<template #footer>
						<n-button @click="dsCancel">取消</n-button>
					</template>
				</el-dialog>
				<Rdbms ref="rdbmsRef" @fetch-data="initTableData"/>
			</div>
		</n-card>
	</div>

</template>
<script setup>
import {ref, onMounted, reactive, toRefs} from 'vue'
import {pageTableData, checkDsConnection, dsTypes, batchDeleteDs} from '@/service/api/resource';
import {useMessage} from "naive-ui";
import Rdbms from './components/rdbms.vue'

const msg = useMessage()
const supportDsDialog = ref(false)
const dbTypes = ref()
const rdbmsRef = ref(null)

const state = reactive({
	dsSearchParams: {
		page: 1,
		size: 10,
	},
	itemCount: 0,
	tableData: []
})
const {itemCount, tableData, dsSearchParams} = toRefs(state);

const resolveImg = (image) => {
	return `/db_images/${image}.jpeg`
}
const openSupportDsType = (dsType) => {
	supportDsDialog.value = false
	rdbmsRef.value.openDialog(dsType)
}
const handlerEdit = (row) => {
	rdbmsRef.value.editOpenDialog(row)
}


const dsOpenSupportDs = () => {
	supportDsDialog.value = true
	dsTypes().then(res => {
		const {data} = res;
		dbTypes.value = data
	})
}
const dsCancel = () => {
	supportDsDialog.value = false
}


const testConnection = (row) => {
	checkDsConnection(row).then(res => {
		if (res.data === true) {
			msg.success("连接成功");
		} else {
			msg.error("连接失败")
		}
	})
}
const handlerDelete = (dsId) => {
	batchDeleteDs([dsId]).then(res => {
		if (res.data === true) {
			msg.success("删除成功")
		} else {
			msg.error("删除失败")
		}
		initTableData();
	})
}

const onChange = (page) => {
	state.dsSearchParams.page = page;
	initTableData()
}

const onUpdatePageSize = (pageSize) => {
	state.dsSearchParams.size = pageSize;
	initTableData()
}

onMounted(() => {
	initTableData()
})
const initTableData = async () => {
	const {data} = await pageTableData(state.dsSearchParams)
	state.tableData = data.records;
	state.itemCount = data.total;
}


</script>

<style lang="scss" scoped>


.dbMain {
	display: flex;
	flex-wrap: wrap;
	margin-left: 20px;

	.dbMainItem {
		width: 19%;
		height: 120px;
		margin-bottom: 15px;

		.image {
			object-fit: fill;
			height: 90px;
			width: 100%;
		}

		div {
			height: 30px;
			line-height: 30px;
			text-align: center;
			background-color: #f2f4f7;
			color: #647185;
			margin-top: -4px;
		}

		&:hover {
			cursor: pointer;
			box-shadow: 0 1px 3px 0 rgb(35 46 64 / 20%);
		}

		&:not(:nth-child(5n)) {
			margin-right: calc(20% / 4);
		}
	}
}


</style>
